<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap - 表单</title>

    <link rel="stylesheet" href="static/bootstrap.min.css">

    <!-- 用于调整单选框及复选框的文字位置 -->
    <style>
        .checkbox, .radio {
            padding-left: 20px;
        }

        .checkbox-inline, .radio-inline {
            padding-right: 128px;
        }

        .checkbox label, .radio label, .checkbox-inline label, .radio-inline label {
            position: relative;
            padding-left: 5px;
            padding-top: 10px;
        }
    </style>
</head>
<body>
<div class="container">
    <!-- 使用 Bootstrap 表单功能时，需要为表单元素添加属性 role="form" -->
    <form action="" method="post" role="form">
        <h1>用户信息表单</h1>

        <!--
            以下每一项输入控件，需要单独放置于 class 为 form-group 的 div 中。(获取最佳间距)
            同时，不再需要使用 br 标签换行。
            并且需要为每一个输入控件添加 form-control 的 class。（应用 Bootstrap 样式）
        -->
        <div class="form-group">
            <label for="input-username">用户名</label>
            <input type="text" name="username" id="input-username" class="form-control">
        </div>

        <div class="form-group">
            <label for="input-password">密码</label>
            <input type="password" name="password" id="input-password" class="form-control">
        </div>

        <div class="form-group">
            <label for="input-age">年龄</label>
            <input type="number" name="age" id="input-age" class="form-control">
        </div>

        <div class="form-group">
            <label for="input-phone">电话</label>
            <input type="tel" name="phone" id="input-phone" class="form-control">
        </div>

        <!-- 电子邮箱输入 -->
        <label for="input-email">邮箱</label>
        <input type="email" name="email" id="input-email" class="form-control">
        <div class="form-group"></div>

        <div class="form-group">
            <label for="input-introduce">自我介绍</label>
            <textarea name="introduce" id="input-introduce" class="form-control"></textarea>
        </div>

        <div class="form-group">
            <label for="input-education">学历</label>
            <select id="input-education" class="form-control">
                <option value="0">保密</option>
                <option value="1">中专</option>
                <option value="2">高中</option>
                <option value="3">专科</option>
                <option value="4">本科</option>
            </select>
        </div>

        <label for="input-sex">性别</label>
        <div class="form-group">
            <!-- 将 class radio 改变为 radio-inline 可实现横向分布。 -->
            <div class="radio-inline">
                <input type="radio" name="sex" id="input-sex-male" class="form-control">
                <label for="input-sex-male">男</label>
            </div>
            <div class="radio-inline">
                <input type="radio" name="sex" id="input-sex-female" class="form-control">
                <label for="input-sex-female">女</label>
            </div>
        </div>

        <label>特长</label>
        <div class="form-group">
            <div class="checkbox">
                <input type="checkbox" name="soft" id="input-skill-soft" class="form-control">
                <label for="input-skill-soft">软件开发</label>
            </div>
            <div class="checkbox">
                <input type="checkbox" name="server" id="input-skill-server" class="form-control">
                <label for="input-skill-server">系统运维</label>
            </div>
            <div class="checkbox">
                <input type="checkbox" name="safe" id="input-skill-safe" class="form-control">
                <label for="input-skill-safe">网络安全</label>
            </div>
        </div>

        <!--
            按钮控件需要添加 btn class，不同颜色的按钮可以使用 btn-xx 的 class。
            此处 xx 可为 default 、primary 、success 、info、 warning、 danger。
        -->
        <button type="submit" class="btn btn-primary">保存</button>
        <button type="reset" class="btn btn-danger">重置</button>
    </form>
</div>

<script src="static/jquery.min.js"></script>
<script src="static/bootstrap.min.js"></script>
</body>
</html>